<!-- Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
     for details. All rights reserved. Use of this source code is governed by a
     BSD-style license that can be found in the LICENSE file. -->

<html>
  <head>
    <title>spirodraw</title>
    <link type="text/css" rel="stylesheet" href="spirodraw.css">
    
  </head>
  <body>
  <div id="leftnav">
    <div class="control">
      <select id="in_out" size="1" class="full">
        <option selected value="-1">Wheel inside</option>
        <option value="1">Wheel outside</option>
      </select>
    </div>
  
    <div class="control">
      <label>Fixed radius</label>
      <input id="fixed_radius" type="range" min="10" max="19" value="10">
      <div class="rangeOption">
        <div class="rangeRow">
          <label>10</label>
          <label>11</label>
          <label>12</label>
          <label>13</label>
          <label>14</label>
          <label>15</label>
          <label>16</label>
          <label>17</label>
          <label>18</label>
          <label>19</label>
        </div>
      </div>
    </div>
  
    <div class="control">
      <label>Wheel radius</label>
      <input id="wheel_radius" type="range" min="0" max="9" value="3">
      <div class="rangeOption">
        <div class="rangeRow">
          <label>0</label>
          <label>1</label>
          <label>2</label>
          <label>3</label>
          <label>4</label>
          <label>5</label>
          <label>6</label>
          <label>7</label>
          <label>8</label>
          <label>9</label>
        </div>
      </div>
    </div>
  
    <div class="control">
      <label>Pen radius</label>
      <input id="pen_radius" type="range" min="0" max="9">
      <div class="rangeOption">
        <div class="rangeRow">
          <label>0</label>
          <label>1</label>
          <label>2</label>
          <label>3</label>
          <label>4</label>
          <label>5</label>
          <label>6</label>
          <label>7</label>
          <label>8</label>
          <label>9</label>
        </div>
      </div>
    </div>
  
    <div>
      <canvas id="palette" height="160" width="180" />
    </div>
    
    <div class="control">
      <label>Pen thickness</label>
      <input id="pen_width" type="range" min="1" max="10">
    </div>
  
    <div class="control">
      <div class="rangeOption">
        <div class="rangeRow">
          <label class="minLabel">Smoother</label>
          <label class="maxLabel">Faster</label>
        </div>
      </div>
      <input id="speed" type="range" min="1" max="20" value="15">
    </div>
    
    <div class="control">
      <div class="buttonBar">
        <input type="button" id="lucky" value="I'm feeling lucky!"></input>
      </div>
      <div class="buttonBar">
        <input type="button" id="start" value="Start"></input>
        <input type="button" id="stop" value="Stop"></input>
        <input type="button" id="clear" value="Clear"></input>
      </div>
    </div>
    
    <div class="control,centered">
      <label># turns</label>
      <label id="num_turns" class="counter">0</label>
    </div>
  </div>
  
  <div id="main">
    <canvas id="canvas" />
  </div>
  
  <script type="application/dart" src="Spirodraw.dart"></script>
  <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>
